<template>
  <div class="overview">
    <div class="overview-container">
      <ul class="tabs">
        <li class="tabs-item" :class="item.isActive?'active':''"  v-for="(item,index) in listData" :key="index" @click="handleClickChangeTab(item)">
          <span class="text">{{item.name}}</span>
        </li>
      </ul>
      <div style="height: 86%;" v-show="currentTab===1">
        <div class="data-container" style="height: 33%;">
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.total_amount}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">总交易</div>
          </div>
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.today_amount}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">今日交易</div>
          </div>
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.yesterday_amount}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">昨日交易</div>
          </div>
        </div>
        <div class="data-container" style="height: 33%;">
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.total_income}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">实际总收入</div>
          </div>
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.today_income}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">今日收入</div>
          </div>
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.yesterday_income}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">昨日收入</div>
          </div>
        </div>
        <div class="data-container" style="height: 33%;">
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.total_profit}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">实际总利润</div>
          </div>
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.today_profit}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">今日利润</div>
          </div>
          <div class="data general">
            <div class="statis">
              <div class="price">{{total_situation.yesterday_profit}}</div>
              <div class="unit">元</div>
            </div>
            <div class="des">昨日利润</div>
          </div>
        </div>
      </div>
      <div class="data-container" v-show="currentTab===2">
        <div class="data">
          <div class="statis">
            <div class="price">{{goods_total_count}}</div>
          </div>
          <div class="des">总商品数</div>
        </div>
        <div class="data">
          <div class="statis">
            <div class="price">{{goods_today_count}}</div>
          </div>
          <div class="des">今日发布</div>
        </div>
        <div class="data">
          <div class="statis">
            <div class="price">{{goods_yesterday_count}}</div>
          </div>
          <div class="des">昨日发布</div>
        </div>
        <div class="data">
          <div class="statis">
            <div class="price">{{goods_on_sale_count}}</div>
          </div>
          <div class="des">在售商品数</div>
        </div>
      </div>

      <div class="data-container" v-show="currentTab===3">
        <div class="data general">
          <div class="statis">
            <div class="price">{{order_total_count}}</div>
          </div>
          <div class="des">总订单数</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{order_today_count}}</div>
          </div>
          <div class="des">今日订单</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{order_yesterday_count}}</div>
          </div>
          <div class="des">昨日订单</div>
        </div>
      </div>

      <div class="data-container" v-show="currentTab===4">
        <div class="data general">
          <div class="statis">
            <div class="price">{{total_dispatch}}</div>
          </div>
          <div class="des">总分发</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{today_dispatch}}</div>
          </div>
          <div class="des">今日分发</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{yesterday_dispatch}}</div>
          </div>
          <div class="des">昨日分发</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{total_consume}}</div>
          </div>
          <div class="des">总消耗</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{today_consume}}</div>
          </div>
          <div class="des">今日消耗</div>
        </div>
        <div class="data general">
          <div class="statis">
            <div class="price">{{yesterday_consume}}</div>
          </div>
          <div class="des">昨日消耗</div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import Axios from 'axios'
export default {
  name: "overview",
  methods: {
    handleClickChangeTab(data) {
      for (let item of this.listData) {
        item.isActive = false;
        if (item.name === data.name) {
          item.isActive = true;
          this.currentTab = item.id;
        }
      }
      switch (data.id) {
        case 1:
          this.getGeneralSituation();
          break;
        case 2:
          this.getGoodsSituation();
          break;
        case 3:
          this.getOrderSituation();
          break;
        case 4:
          this.getStarsSituation();
          break;
      }
    },

    //获取星星数据
    getStarsSituation() {
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=stars_situation",
        "post",
        {},
        {},
        {},
        success => {
          console.log(success.data);
          this.total_dispatch = success.data.total_dispatch;
          this.total_consume = success.data.total_consume;
          this.today_consume = success.data.today_consume;
          this.today_dispatch = success.data.today_dispatch;
          this.yesterday_consume = success.data.yesterday_consume;
          this.yesterday_dispatch = success.data.yesterday_dispatch;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //获取订单数据
    getOrderSituation() {
      let formData = new FormData();
      formData.append("is_situation", 0);
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=order_situation",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success);
          this.order_today_count = success.data.today_count;
          this.order_total_count = success.data.total_count;
          this.order_yesterday_count = success.data.yesterday_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //获取商品数据
    getGoodsSituation() {
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=goods_situation",
        "post",
        {},
        {},
        {},
        success => {
          console.log(success);
          this.goods_total_count = success.data.total_count;
          this.goods_today_count = success.data.today_count;
          this.goods_yesterday_count = success.data.yesterday_count;
          this.goods_on_sale_count = success.data.on_sale_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    //获取交易额数据
    getGeneralSituation() {
      let formData = new FormData();
      formData.append("is_situation", 0);
      this.$http(
        "/wgl_admin/index.php?app=general_situation&act=index",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success);
          this.total_situation = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  },
  created() {
    this.getGeneralSituation();
  },
  mounted() {},
  data() {
    return {
      total_situation: {},
      total_dispatch: "",
      total_consume: "",
      today_consume: "",
      today_dispatch: "",
      yesterday_consume: "",
      yesterday_dispatch: "",

      order_today_count: "",
      order_total_count: "",
      order_yesterday_count: "",
      goods_on_sale_count: "",
      goods_total_count: "",
      goods_today_count: "",
      goods_yesterday_count: "",
      currentTab: 1,
      currentPage: 1,
      listData: [
        {
          name: "交易额",
          isActive: true,
          id: 1
        },
        {
          id: 2,
          name: "商品",
          isActive: false
        },
        {
          id: 3,
          name: "订单",
          isActive: false
        },
        {
          id: 4,
          name: "星星",
          isActive: false
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.overview {
  width: 100%;
  height: 100%;
  padding: 30px 70px 30px 50px;
}
.overview-container {
  width: 100%;
  border: 1px solid #e6e8f4;
  height: 94%;
  position: relative;
}
.tabs {
  height: 62px;
  line-height: 62px;
  width: 100%;
  background: #f5f8fd;
  border-bottom: 1px solid #e6e8f4;
  > .tabs-item {
    float: left;
    width: 280px;
    text-align: center;
    color: #999a9c;
    cursor: pointer;
    .text {
      position: relative;
      display: inline-block;
      margin: 0 auto;
      font-size: 16px;
    }
  }
  .tabs-item.active {
    .text {
      color: #3f87f5;
    }
    .text:after {
      content: "";
      width: 100%;
      height: 3px;
      background: #3f87f5;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
    }
  }
}
.data-container {
  height: 86%;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .data {
    width: 25%;
    .statis {
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .price {
        font-size: 40px;
        color: #333;
      }
      .unit {
        font-size: 16px;
        color: #999;
      }
    }
    .des {
      margin-top: 6px;
      text-align: center;
      color: #999;
      font-size: 16px;
    }
  }
  .data.general {
    width: 33%;
  }
}
</style>
